<template>
  <div class="main-aside">
    <div class="slide-logo">
      <img src="@/assets/img/logo1.jpg" alt="" class="logo-img" />
      <h3 v-show="!props.isFold">YX后台管理系统</h3>
    </div>
    <div class="slide-menu">
      <el-scrollbar class="my-el-scrollbar">
        <el-menu
          :collapse="props.isFold"
          :default-active="menuList[0].name"
          mode="vertical"
          :unique-opened="true"
          :collapse-transition="false"
        >
          <AsideItem :menulist="menuList"></AsideItem>
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import useLoginStore from "@/store/login/login"
import AsideItem from "@/components/aside-item.vue"
const loginStore = useLoginStore()
let menuList = loginStore.menuList
const props = defineProps({
  isFold: {
    type: Boolean,
    default: () => {
      return false
    }
  }
})
</script>
<style scoped lang="scss">
.slide-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px 8px;
  height: 50px;
  box-sizing: border-box;
  .logo-img {
    width: 35px;
    height: 35px;
  }
}
.main-aside {
  .slide-menu {
    height: calc(100vh - 50px);
    .el-menu {
      border-right: none;
    }
  }
  :deep(.el-menu) {
    --el-menu-bg-color: #000;
    --el-menu-text-color: #fff;
    --el-menu-active-color: red;
    --el-menu-hover-bg-color: transparent;
  }
}
</style>
